<!--头部公共部分-->
{include file="common/header" /}

<div style="padding:15px;font-size: 14px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: 12px;">订单编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="contract_number" readonly value='{$contract.contract_number}'
                           autocomplete="off"   class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: 12px;">学员姓名</label>
                <div class="layui-input-inline">
                    <input type="text" readonly name="student_name" value='{$contract.student_name}' autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" name="total_amount" style="font-size: 12px;">订单总额(元)</label>
                <div class="layui-input-inline">
                    <input type="text" readonly name="total_amount" value='{$contract.total_amount}' autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: -10px;">
            <div class="layui-inline">
                <label class="layui-form-label"  style="font-size: 12px;"><span class="x-red"></span>储值余额(元)</label>
                <div class="layui-input-inline">
                    <input type="text" readonly  value='{$contract.account_balance}'
                           autocomplete="off"   class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: 12px;"><span class="x-red"></span>学费余额(元)</label>
                <div class="layui-input-inline">
                    <input type="text"   readonly value='{$contract.balance}' autocomplete="off"   class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: 12px;"><span class="x-red">*</span>物品金额(元)</label>
                <div class="layui-input-inline">
                    <input type="text" readonly  value="{$contract.goods_payment_balance}" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

        </div>


                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="font-size: 12px;"><span class="x-red">*</span>退款通道</label>
                            <div class="layui-input-inline">
                                <select name="refund_channel" lay-verify="required">
                                    <option value="79">现金</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="font-size: 12px;"><span class="x-red">*</span>经手人</label>
                            <div class="layui-input-inline">
                                <select name="experienced_person" lay-verify="required">
                                    <option value="{$Think.session.user.id}">{$Think.session.user.name}</option>

                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="font-size: 12px;"><span class="x-red"></span>退款凭证号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="receipt_number" value='{$contract.receipt_number}' readonly  autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend><span class="x-red" style="font-size: 16px;">退费项目明细</span></legend>
        </fieldset>

        <script>

            let Project_list = eval('{$Project_list}');

            for(let i =0; i < Project_list.length; i ++) {

                document.write('<div class="layui-form-item">');

                document.write('<div class="layui-inline">');
                document.write('<label class="layui-form-label" style="font-size: 12px;"><span class="x-red">*</span>名称</label>');
                document.write('<div class="layui-input-inline">');
                document.write('<input type="text"  readonly  lay-verify="required" autocomplete="off" value="'+ Project_list[i].project_title +'" class="layui-input">');
                document.write('</div>');
                document.write('</div>');

                document.write('<div class="layui-inline">');
                document.write('<label class="layui-form-label" style="font-size: 12px;"><span class="x-red">*</span>余额</label>');
                document.write('<div class="layui-input-inline">');
                document.write('<input type="text" readonly  lay-verify="required" autocomplete="off" value="'+ Project_list[i].project_payment_balance +'"  class="layui-input">');
                document.write('</div>');
                document.write('</div>');


                document.write('<div class="layui-inline">');
                document.write('<label class="layui-form-label" style="font-size: 12px;"><span class="x-red">*</span>退款</label>');
                document.write('<div class="layui-input-inline">');
                document.write('<input type="number" min="0"  oninput="UpdateAmount(this)"  name="amount_item"  max="'+ Project_list[i].project_payment_balance +'"   lay-verify="required" autocomplete="off" value="'+ Project_list[i].project_payment_balance +'"  class="layui-input">');
                document.write('</div>');
                document.write('</div>');

                document.write('<div class="layui-inline">');
                document.write('<div class="layui-input-inline">');
                document.write('<input type="checkbox" name="ids" lay-filter="ids_filter" lay-skin="primary" title="是否退费?">');
                document.write('</div>');
                document.write('</div>');

                document.write('</div>');
            }
        </script>


        <fieldset class="layui-elem-field layui-field-title">
            <legend><span style="font-size: 20px;">退款总金额</span><span class="x-red" id="total_amount">&nbsp;&nbsp;&nbsp;￥0.00</span></legend>
        </fieldset>

        <div class="layui-inline">
                        <button class="layui-btn layui-btn-sm layui-btn-primary"  style="width:80px;" id="cancle"  readonly>取消</button>
                        <input class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="form" style="width:80px;" value="保存" readonly>
                    </div>

    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>



    let cheked_ids = [];
    layui.use(['element', 'jquery', 'form', 'laydate', 'layer'], function () {
        let $ = layui.$,
            layer = layui.layer,
            form = layui.form,
            element = layui.element,
            laydate = layui.laydate,
            jquery = layui.jquery;


        form.on('checkbox(ids_filter)',function (obj) {
            let amount = 0;
            cheked_ids = [];
            var amount_item = document.getElementsByName("amount_item");  //退款金额
            var inputs = document.getElementsByName("ids");  //退款项目
            for(var i=0;i<inputs.length;i++){
                if(inputs[i].checked == true){
                    amount = amount + parseInt(amount_item[i].value);
                    cheked_ids.push(i);
                }
            }
            console.log(amount);
            $("#total_amount").html('&nbsp;&nbsp;&nbsp;￥'+amount)
        });


        //监听提交
        form.on('submit(form)', function (data) {
            var field = data.field
            var inputs = document.getElementsByName("ids");  //退款项目
            var amount_item = document.getElementsByName("amount_item");  //退款金额
            var refund_arr = [];
            for(var i=0;i<inputs.length;i++){
                if(inputs[i].checked == true){
                    var row = {};
                    row.id = Project_list[i].project_id;
                    row.type = Project_list[i].project_type;
                    row.amount = parseInt(amount_item[i].value);
                    refund_arr.push(row);
                }
            }
            if(refund_arr.length <= 0){
                layer.msg("请勾选需要退款的项目");
                return;
            }
            field.json = JSON.stringify(refund_arr);
            field.contract_id = '{$contract.id}';
            console.log(  field.json);
            $.ajax({
                url: '/admin/contract/saverefund?type_status='+ 2,
                method: "post",
                data: field,
                beforeSend: function () {

                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.location.reload();
                        }, 1000);
                    }

                },
                complete: function () {
                },
                error: function (error) {
                    console.log(error)
                }
            });

            return false;
        });



        //取消
        $('#cancle').click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
            return false;
        });
    });

    function UpdateAmount(obj) {
        let amount = 0;
        var amount_item = document.getElementsByName("amount_item");  //退款金额
        for(var i=0;i<cheked_ids.length;i++){
                amount = amount + parseInt(amount_item[cheked_ids[i]].value);
        }
        $("#total_amount").html('&nbsp;&nbsp;&nbsp;￥'+amount)
    }

</script>
